<template>
  <div class="halt">
    <div class="search-box">
      <a-form-model :model="searchForm" layout="inline" ref="searchForm" class="searchForm">
        <a-form-model-item label="" prop="handleStatus">
          <a-select v-model="searchForm.handleStatus" placeholder="请选择处理状态">
            <a-select-option  key="" value="" >
              请选择处理状态
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item class="searchButton">
          <a-button type="primary" @click="getSearch">查询</a-button>
          <a-button type="default" @click="restSearch('searchForm')">重置</a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
    <a-table
      :columns="columns"
      :data-source="dataList"
      :pagination="false"
      :loading="loading"
      rowKey="todoId"
      :scroll="{x:1030,y: 300 }">
      <span slot="feild5" slot-scope="text,record">
         <span v-if="text==0"><span class="dot dot-red"></span>未读</span>
         <span v-else><span class="dot dot-green"></span>已读</span>
      </span>
      <span slot="feild3" slot-scope="text,record">
         <span v-if="text==0"><span class="dot dot-red"></span>未处理</span>
         <span v-else><span class="dot dot-green"></span>已处理</span>
      </span>
    </a-table>
    <div class="modalPage">
      <a-pagination
        show-size-changer
        :total="totalPage"
        :current="pageIndex"
        :pageSize="pageSize"
        @showSizeChange="onShowSizeChange"
        @change="onChangePage"
        style="float: right;margin-top: 15px"
      />
    </div>
  </div>
</template>
<script>
import preventBack from 'vue-prevent-browser-back';
import {req} from "../../../api/axiosFun";
export default {
  name: "Halt",
  mixins: [preventBack],//注入
  data(){
    return {
      searchForm: {
        feild3: '',
      },
      dataList: [
        {
          todoId: 1,
          feild1: '刘备',
          feild2: '2022-04-01 8:30',
          feild3: 0,
          feild4: '设备001出现故障，请及时处理',
          feild5: 1,
        },
        {
          todoId: 2,
          feild1: '刘备',
          feild2: '2022-04-01 8:30',
          feild3: 0,
          feild4: '设备001出现故障，请及时处理',
          feild5: 1,
        },
        {
          todoId: 3,
          feild1: '刘备',
          feild2: '2022-04-01 8:30',
          feild3: 1,
          feild4: '设备001出现故障，请及时处理',
          feild5: 1,
        },
        {
          todoId: 4,
          feild1: '刘备',
          feild2: '2022-04-01 8:30',
          feild3: 0,
          feild4: '设备001出现故障，请及时处理',
          feild5: 1,
        },
        {
          todoId: 5,
          feild1: '刘备',
          feild2: '2022-04-01 8:30',
          feild3: 1,
          feild4: '设备001出现故障，请及时处理',
          feild5: 1,
        },
        {
          todoId: 6,
          feild1: '刘备',
          feild2: '2022-04-01 8:30',
          feild3: 0,
          feild4: '设备001出现故障，请及时处理',
          feild5: 1,
        },
        {
          todoId: 7,
          feild1: '刘备',
          feild2: '2022-04-01 8:30',
          feild3: 0,
          feild4: '设备001出现故障，请及时处理',
          feild5: 1,
        },
        {
          todoId: 8,
          feild1: '刘备',
          feild2: '2022-04-01 8:30',
          feild3: 0,
          feild4: '设备001出现故障，请及时处理',
          feild5: 1,
        },
        {
          todoId: 9,
          feild1: '刘备',
          feild2: '2022-04-01 8:30',
          feild3: 0,
          feild4: '设备001出现故障，请及时处理',
          feild5: 1,
        },
        {
          todoId: 10,
          feild1: '刘备',
          feild2: '2022-04-01 8:30',
          feild3: 0,
          feild4: 1,
        }
      ],
      columns,
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
    }
  },
  methods: {
    //查询
    getSearch() {
      this.pageIndex = 1
      this.getStorageList()
    },
    /* 重置查询 */
    restSearch(form) {
      this.restForm(form);
      this.pageIndex = 1
      this.getStorageList();
    },
    /* 重置表单 */
    restForm(form) {
      this.$refs[form].resetFields();
    },
    /* 改变页数事件 */
    onChangePage(page, pageSize) {
      this.pageIndex = page;
      this.getStorageList();
    },
    /* 改变每页显示条数 */
    onShowSizeChange(current, pageSize) {
      this.pageIndex = 1;
      this.pageSize = pageSize;
      this.getStorageList();
    },
    /* 库存列表 */
    getStorageList() {
      this.loading = true;
      this.searchForm.page = this.pageIndex;
      this.searchForm.rows = this.pageSize;
      req("post", `/storage/getStorageList`, this.searchForm)
        .then(res => {
          if (res.result === 'success') {
            this.dataList = res.data;
            this.totalPage = res.page.totalResult;
            this.QX = res.QX;
            let operation = columns[columns.length - 1];
            if (!this.QX.edit && !this.QX.delete) {
              if (operation.title === '操作') {
                columns.splice(columns.length - 1, 1)
              }
            } else {
              if (operation.title !== '操作') {
                columns.push({
                  align: 'center',
                  title: '操作',
                  width: 220,
                  dataIndex: 'action',
                  key: 'action',
                  fixed: 'right',
                  scopedSlots: {customRender: 'action'},
                });
              }
            }
          }
          this.loading = false;
        }).catch(e => {
        this.loading = false;
      });
    },
  }
}
const columns = [
  {
    title: '序号',
    width:'70px',
    align: 'center',
    customRender: (text, row, index) => {
      return index+1;
    },
  },
  {
    title: '发送人',
    align: 'center',
    dataIndex: 'feild1',
    key: 'feild1',
    width: 100,
  },
  {
    title: '发送时间',
    align: 'center',
    dataIndex: 'feild2',
    key: 'feild2',
    width: 150,
  },
  {
    title: '已读未读状态',
    align: 'center',
    dataIndex: 'feild5',
    key: 'feild5',
    width: 120,
    scopedSlots: {customRender: 'feild5'},
  },
  {
    title: '处理状态',
    align: 'center',
    dataIndex: 'feild3',
    key: 'feild3',
    width: 120,
    scopedSlots: {customRender: 'feild3'},
  },
  {
    title: '内容',
    // align: 'center',
    dataIndex: 'feild4',
    key: 'feild4',
    ellipsis: true,
  },
];
</script>
<style scoped>
@import "../../../assets/css/maincss.css";

</style>
